let wrapperBox=document.querySelector(".wrapper");//轮播图图片容器
let bannerBox=document.getElementById("bannerBox");//整个轮播图的盒子
let slides=null;//所有的图片盒子
let spans=null;//所有的小圆点
let pagination=document.querySelector(".pagination");//小圆点容器
let w=bannerBox.offsetWidth;//一个图片的宽度
let step=0;//设置初始步长
let count=null;//总图片长度
let timer=null;
let data=null;

//获取数据+循环渲染
function start(){
    //1.获取数据
    let xhr=new XMLHttpRequest;
    xhr.open("get","data.json",false);
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
             data=JSON.parse(xhr.response);
        }
    }
    xhr.send();

    //2.循环渲染
    let strImg="",strCricle="";
    data.forEach((item,index)=>{
        strImg+=`<div class="slide">
              <img src="${item.pic}" alt="">
        </div>`;
        strCricle+=`<span class="${index==0?'active':''}" index="${index}"></span>`
    })
    //最后一个img 要复制第一个
    strImg+=`<div class="slide">
            <img src="${data[0].pic}" alt="">
        </div>`;

    wrapperBox.innerHTML=strImg;
    pagination.innerHTML=strCricle;

    slides=document.querySelectorAll(".slide");//所有的图片盒子
    spans=document.querySelectorAll("span");//所有的小圆点
    count=slides.length;//总图片长度
}
start()

//自动轮播
function autoPlay(){
    step++;
    if(step>count-1){
        wrapperBox.style.transitionDuration="0s";//动画立刻停止
        step=0;//4--0
        wrapperBox.style.left=`0px`;//展示第一幅图

        wrapperBox.offsetHeight;//获取属性

        wrapperBox.style.transitionDuration="0.3s";//动画立刻开启
        step=1;//0--1
    }
    wrapperBox.style.left=`-${step*w}px`;
    activeCricle();//小圆点激活
}
timer=setInterval(autoPlay,1000)

//移入盒子，定时器停止 mouseenter/mouseover
bannerBox.onmouseenter=function(){
  clearInterval(timer);
  timer=null;
}
//移出盒子，定时器重新开始  mouseleave/mouseout
bannerBox.onmouseleave=function(){
   timer=setInterval(autoPlay,1000)
}

//小圆点激活
function activeCricle(){
    //step 0,1,2,3
    //temp 0,1,2,3
    let temp=step;
    if(step==count-1){//step==3
        temp=0;//0,1,2,0
    }
    spans.forEach((item)=>{
        let index=+item.getAttribute("index");//0,1,2
        if(index==temp){
           item.className="active";
        }else{
           item.className="";
        }
    })
}

//事件委托  绑定事件委托给祖先级元素,减少事件的绑定提高性能
bannerBox.onclick=function(e){//e--》event 事件对象
   //console.log(e.target);//e.target 目标元素，当前点击的元素
   //console.log(e.target.tagName);//当前点击元素的标签名，全大写
   //console.log(e.target.className);//当前点击元素的class的值，全大写
   if(e.target.tagName==="SPAN"){//小圆点
     //getAttribute("XXX")---值类型都是字符串
     let index=+e.target.getAttribute("index");//+"10"--->10  "10"*1--->10
     if(step==index||(step==3&&index==0)){
        return;
     }
     step=index;
     wrapperBox.style.left=`-${step*w}px`;
     activeCricle();//小圆点激活
   }
   if(e.target.className.includes("prev")){//上一个
      step--;
      if(step<0){
        wrapperBox.style.transitionDuration="0s";//立刻停止动画
        step=count-1;//3
        wrapperBox.style.left=`-${step*w}px`;//到最后一幅图

        wrapperBox.offsetWidth;//更新浏览器队列

        //倒数第一幅，有动画版的进入倒数第二幅图片
        wrapperBox.style.transitionDuration="0.3s";//立刻开始动画
        step=count-2;//2
      }
      wrapperBox.style.left=`-${step*w}px`;
      activeCricle();//小圆点激活
   }
   if(e.target.className.includes("next")){//下一个
       autoPlay();
   }
}


